<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath() ;%>
<%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c" %> 
<%@ taglib uri="/WEB-INF/tld/fmt.tld" prefix="fmt" %>
<%@ taglib uri="/WEB-INF/tld/ui.tld" prefix="ui" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>二手车评估报告</title>
    <jsp:include page="../../import.jsp" flush="true" />
</head>
<body class="iframeBody">
	<div class="header">
	    <div class="head-info" style="display:none;">
	        <div class="searchBox">
	            <div class="clearfix">
	                <input class="searchTxt" type="text" value="请搜索品牌、型号等关键词">
	                <input class="searchBtn" type="button" value="搜 索"/>
	            </div>
	            <input type="hidden" id="hidSessionKeyWords" value="">
	            <div class="recommend"></div>
	        </div>
	    </div>
	</div>
	<br/>
	
	<div class="fieldset1 tabel_col clearFix">
		<!-- 车辆报告PDF展示 -->
		<div class="caption">
			<span class="title"><strong>车辆报告PDF展示</strong></span>
		</div>
		<div class="fieldBox col_100">
			<div style="width: 98%; margin-left: 1%;">
				<c:forEach items="${reMap.filesList}" var="map">
					<embed width="100%" height="500" src="${map.filePath}"></embed><!-- ${reMap.pdfUrl} -->
				</c:forEach>
			</div>
		</div>
		
		<!-- 评估车表单基本信息 -->
		<div class="caption">
			<span class="title"><strong>评估车表单：${reMap.vin}</strong></span>
		</div>
           <div class="fieldBox col_100">
			<div class="label">在线报告</div>
			<div class="field">
				<a href="${reMap.reportUrl}" target="_blank">${reMap.reportUrl}</a>
			</div>
		</div>
           <div class="fieldBox col_100">
			<div class="label">在线PDF</div>
			<div class="field"><!-- 这里需要本地PDF路径 -->
				（<a href="" onclick="uploadFileByUrl('${reMap.pdfUrlBen}','${reMap.vin}评估报告.pdf')">下载</a>）
				<a href="${reMap.pdfUrl}" target="_blank">${reMap.pdfUrl}</a>
			</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">品牌名称</div>
			<div class="field">${reMap.brandName}</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">车系名称</div>
			<div class="field">${reMap.seriesName}</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">车型名称</div>
			<div class="field">${reMap.modelName}</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">所在城市</div>
			<div class="field">${reMap.cityName}</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">初次上牌年月</div>
			<div class="field">${reMap.regDate}</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">表显里程</div>
			<div class="field">${reMap.shownMile} 万公里</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">评估里程</div>
			<div class="field">${reMap.evalMile} 万公里</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">过户次数</div>
			<div class="field">${reMap.transferTimes} 次</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">排量</div>
			<div class="field">${reMap.liter} 升</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">是否有涡轮增压</div>
			<div class="field">
				<c:choose>
					<c:when test="${reMap.literTurbo == '0'}">无</c:when>
	       			<c:when test="${reMap.literTurbo == '1'}">有</c:when>
				</c:choose>
			</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">出厂年月</div>
			<div class="field">${reMap.makeDate}</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">发动机号</div>
			<div class="field">${reMap.engineNo}</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">车身颜色</div>
			<div class="field">${reMap.color}</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">是否营转非</div>
			<div class="field">
				<c:choose>
					<c:when test="${reMap.switchFromService == 'false'}">否</c:when>
					<c:when test="${reMap.switchFromService == 'true'}">是</c:when>
				</c:choose>
			</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">是否抵押</div>
			<div class="field">
				<c:choose>
					<c:when test="${reMap.isDy == 'false'}">否</c:when>
					<c:when test="${reMap.isDy == 'true'}">是</c:when>
				</c:choose>
			</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">是否逃逸</div>
			<div class="field">
				<c:choose>
					<c:when test="${reMap.isTy == 'false'}">否</c:when>
					<c:when test="${reMap.isTy == 'true'}">是</c:when>
				</c:choose>
			</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">是否套牌</div>
			<div class="field">
				<c:choose>
					<c:when test="${reMap.isTp == 'false'}">否</c:when>
					<c:when test="${reMap.isTp == 'true'}">是</c:when>
				</c:choose>
			</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">新车指导价</div>
			<div class="field">${reMap.modelPrice} 万元</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">评估定价</div>
			<div class="field">${reMap.evalPrice} 万元</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">事故车类型</div>
			<div class="field">${reMap.accidentType}</div>
		</div>
           <div class="fieldBox col_33">
			<div class="label">报告生成时间</div>
			<div class="field">${reMap.reportTime}</div>
		</div>
		
		<!-- 车辆照片展示 -->
		<div class="caption">
			<span class="title"><strong>车辆照片展示</strong></span>
		</div>
		<div class="fieldBox col_100">
			<div style="width: 98%; margin-left: 1%;">
				<div class="sqSwiper">
					<div class="view">
						<div class="swiper-container">
							<a class="arrow-left" href="#"></a>
							<a class="arrow-right" href="#"></a>
							<div class="swiper-wrapper">
								<c:forEach items="${reMap.photoList}" var="map">
									<div class="swiper-slide">
										<a><img src="${map.filePath}" alt=""></a><!-- ${map.fileRem} -->
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
					<div class="preview">
						<a class="arrow-left" href="#"></a>
						<a class="arrow-right" href="#"></a>
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<c:forEach items="${reMap.photoList}" var="map">
									<div class="swiper-slide">
										<a><img src="${map.filePath}" alt=""></a><!-- ${map.fileRem} -->
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	//下载文件方法
	function uploadFileByUrl(_url,_name){
		if(SQ.regs.img.test(_name)){
			SQ.imgPreview(_url, true);
		}else{
			window.open(_url);
		}
	}
	//车辆照片展示
	var viewSwiper = new Swiper('.sqSwiper .view .swiper-container', {
		onSlideChangeStart: function() {
			updateNavPosition();
		}
	});

	$('.sqSwiper .view .arrow-left, .sqSwiper .preview .arrow-left').on('click', function(e) {
		e.preventDefault();
		if (viewSwiper.activeIndex == 0) {
			viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);
			return;
		}
		viewSwiper.swipePrev();
	});
	$('.sqSwiper .view .arrow-right, .sqSwiper .preview .arrow-right').on('click', function(e) {
		e.preventDefault();
		if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
			viewSwiper.swipeTo(0, 1000);
			return;
		}
		viewSwiper.swipeNext();
	});

	var previewSwiper = new Swiper('.sqSwiper .preview .swiper-container', {
		visibilityFullFit: true,
		slidesPerView: 'auto',
		onlyExternal: true,
		onSlideClick: function() {
			viewSwiper.swipeTo(previewSwiper.clickedSlideIndex);
		}
	});

	function updateNavPosition() {
		$('.sqSwiper .preview .active-nav').removeClass('active-nav');
		var activeNav = $('.sqSwiper .preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav');
		if (!activeNav.hasClass('swiper-slide-visible')) {
			if (activeNav.index() > previewSwiper.activeIndex) {
				var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1;
				previewSwiper.swipeTo(activeNav.index() - thumbsPerNav);
			} else {
				previewSwiper.swipeTo(activeNav.index());
			}
		}
	}
</script>
</html>